<script setup >
const route = useRoute()
const user = useUserStore()
const name = route.params.id
const id = route.query.id

watchEffect(() => {
  user.setNewName(route.params.id)
  // console.log(user)
})

definePageMeta({
  layout: 'home',
})
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <div class="inline-block animate-shake-x animate-duration-5000 text-4xl">
      <i class="twemoji twemoji-waving-hand"></i>
    </div>
    <h3 class="text-2xl font-medium">Hi,</h3>
    <div class="text-xl">params:{{ name }}!</div>
    <div class="text-xl">query:{{ id }}!</div>

    <template v-if="user.otherNames.length">
      <div class="my-4 text-sm">
        <span class="opacity-50">Also as known as:</span>
        <ul class="list-disc list-inside ml-4">
          <li v-for="otherName in user.otherNames" :key="otherName">
            <router-link :to="`/hi/${otherName}`" replace>
              {{ otherName }}
            </router-link>
          </li>
        </ul>
      </div>
    </template>

    <Counter />

    <div>
      <NuxtLink
        class="m-3 text-sm bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
        to="/"
      >
        Back
      </NuxtLink>
    </div>
  </div>
</template>
<!-- /hi/:id -->